

const { resolve } = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

/**
 * 
 * resolve：解析模块规则
 * 
 * 
 */

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "[name].js",
        path: resolve(__dirname, "build"),
    },
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/,
                // 多个loader用use
                use: ["style-loader", "css-loader"]
            } 
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin()
    ],
    mode: "development",
    // 解析模块规则
    resolve: {
        // 配置解析模块路径的别名  优点 简写路径，缺点 没有提示
        alias: {
            "@": resolve(__dirname, "src")
        },
        // 配置省略的文件后缀名
        extensions: [".js", ".json", ".css"],
        // 告诉webpack解析模块是去找哪个目录
        modules: ["node_modules"]

    }
}